<template>
  <div id="app">

    <pannel></pannel>

    <p> ------------------- vue solt use ---------------------- </p>

    <PannelSolt>

      <template v-slot:title>
        <h4>芙蓉楼送辛渐</h4>
      </template>

      <!-- <template v-slot:content>
        <p>寒雨连江夜入吴,</p>
        <p>平明送客楚山孤。</p>
        <p>洛阳亲友如相问，</p>
        <p>一片冰心在玉壶。</p>
      </template> -->

      <!-- v-bind可以省略成:    v-on: 可以省略成@   那么v-slot: 可以简化成# -->
      <template #content>
        <p>寒雨连江夜入吴,</p>
        <p>平明送客楚山孤。</p>
        <p>洛阳亲友如相问，</p>
        <p>一片冰心在玉壶。</p>
      </template>




    </PannelSolt>


    <p> ====================== </p>

    <PannelSolt2>

      <template v-slot:title>
        <h4>芙蓉楼送辛渐</h4>
      </template>


      <template v-slot="scope">
        <p>{{ scope.row.defaultTwo }}</p>
      </template>

    </PannelSolt2>

    <p>============================================================</p>

    <UseTable></UseTable>

  </div>
</template>

<script>
import Pannel from './components/Pannel.vue';

import PannelSolt from './components/PannelSolt.vue';

import PannelSolt2 from './components/PannelSolt2.vue';


import UseTable from './components/UseTable.vue';

export default {
  components: {
    Pannel,
    PannelSolt,
    PannelSolt2,
    UseTable
  },
}
</script>

<style></style>
